<template>
  <div class="login-container">
    <div class="login-container-box">
      <div class="login-container-box-title">
        <span>明亮后台管理系统</span>
      </div>
      <el-form ref="form" :model="formDatas" size="large" class="login-container-box-form" :rules="formRules">
        <el-form-item prop="userName">
          <el-input prefix-icon="el-icon-user" v-model="formDatas.userName" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="passWord">
          <el-input type="password" autocomplete="off" prefix-icon="el-icon-lock" v-model="formDatas.passWord"
            placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="submitForm('formDatas')"
            class="login-container-box-form-button">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";

export default {
  name: "Login",
  data() {
    return {
      formDatas: {
        userName: "",
        passWord: "",
      },
      formRules: {
        userName: [
          { required: true, message: "请输入您的账号", trigger: "blur" },
        ],
        passWord: [
          { required: true, message: "请输入您的密码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    ...mapActions('permission',["generateRoutes"]),
    // 第一种写法--对象
    // ...mapActions({ login: "login" }),
    // 第二种写法--数组
    // ...mapActions(["login"]),

    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 第一种和第二种写法的应用
          // this.login(this.formDatas).then(() => {
          // this.$router.push({ path: "/" });
          // });
          // 第三种写法--不借用辅助函数(且模块开启了命名空间)
          // this.$store.dispatch("user/login", this.formDatas).then(() => {
            // this.$router.push({ path: "/" });
          // });
          this.generateRoutes();
          this.$router.push({ path: "/" });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: #f5f5f5 url(@/assets/images/bg-login.jpg);
  background-size: cover;

  .login-container-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 500px;
    height: 300px;
    box-shadow: 0 5px 10px #71a0bf;
    background-color: #ffffff;

    .login-container-box-title {
      padding: 25px;

      span {
        font-size: 24px;
        color: #000000;
      }
    }

    .login-container-box-form {
      width: 80%;

      .login-container-box-form-button {
        width: 100%;
      }
    }
  }
}
</style>
